<template>
  <view class="container">
    <view class="card-container">
      <!-- 市场部信息卡片 -->
      <!-- 市场部信息卡片 -->  
<view class="card market-card">  
  <view class="card-header">  
    <text class="card-title">市场部信息</text>  
  </view>  
  <view class="card-content">  
    <view class="form-item">  
      <label>合同编号:</label>  
      <uni-easyinput 
        v-model="marketData.contractNo" 
        placeholder="请输入合同编号"
        @blur="handleContractNoBlur"
        @select="handleSelect"
        :clearable="true"
      >
        <template v-slot:right>
          <uni-icons type="search" size="20" color="#999" />
        </template>
      </uni-easyinput> 
    </view>  
    <view class="form-item">  
      <label>发起时间:</label>  
      <picker mode="date" :value="marketData.initiationTime" @change="onDateChange">  
        <view class="input">{{ marketData.initiationTime || '选择日期' }}</view>  
      </picker>  
    </view>  
    <view class="form-item">  
      <label>发起人:</label>  
      <input v-model="marketData.initiator" placeholder="请输入发起人" class="input" disabled />  
    </view>  
    <view class="form-item">  
      <label>委托单位:</label>  
      <input v-model="marketData.entrustUnit" placeholder="请输入委托单位" class="input" />  
    </view>  
    <view class="form-item">  
      <label>受检单位:</label>  
      <input v-model="marketData.testedUnit" placeholder="请输入受检单位" class="input" />  
    </view>  
    <view class="form-item">  
      <label>检测性质:</label>  
      <picker :range="detectionPropertyOptions" @change="onDetectionPropertyChange">  
              <view class="input">  
                {{ marketData.detectionProperty || '请选择检测性质' }}  
              </view>  
            </picker>  
    </view>  
    <view class="form-item">  
      <label>项目名称:</label>  
      <input v-model="marketData.taskName" placeholder="请输入项目名称" class="input" />  
    </view>  
    <view class="form-item">  
      <label>选择省市区:</label>  
      <!-- 建议可用uni-data-picker插件实现级联选择，也可临时用input -->
      <input v-model="marketData.regionName" placeholder="请输入省市区" class="input" />  
    </view>  
    <view class="form-item">  
      <label>联系人:</label>  
      <input v-model="marketData.contact" placeholder="请输入联系人" class="input" />  
    </view>  
    <view class="form-item">  
      <label>联系电话:</label>  
      <input v-model="marketData.contactPhone" placeholder="请输入联系电话" class="input" />  
    </view>  
    <view class="form-item">  
      <label>紧急程度:</label>  
      <picker :range="urgencyOptions" @change="onUrgencyChange">  
        <view class="input">  
          {{ marketData.urgency || '请选择紧急程度' }}  
        </view>  
      </picker>  
    </view>  
    <view class="form-item">  
      <label>检测方式:</label>  
      <picker :range="detectionMethodOptions" @change="onDetectionMethodChange">  
        <view class="input">  
          {{ marketData.detectionMethod || '请选择检测方式' }}  
        </view>  
      </picker>  
    </view>  
  </view>  
</view>

      <!-- 质控部信息卡片 -->
      <view class="card qc-card">  
        <view class="card-header">  
          <text class="card-title">质控部信息</text>  
        </view>  
        <view class="card-content">  
          <view class="form-item">  
            <label>检测类别:</label>  
            <input 
              v-model="qcData.testCategory" 
              placeholder="请输入/选择检测类别" 
              class="input"
              @click="getxmlbdg"
              :disabled="isZhikong"
            />
          </view>
          <view class="form-item">
            <label>检测项目:</label>
            <input
              v-model="qcData.testItems"
              placeholder="请输入/选择检测项目"
              class="input"
              @click="getxmjcdg"
              :disabled="isZhikong"
            />
          </view>
          <uni-popup ref="multiPopup" type="bottom" class="popup-container">
            <view class="popup-content">
              <view class="search-box">
                <uni-easyinput
                  v-model="formDataLb.checkTypeName"
                  placeholder="请输入检测类别"
                  @blur="getListjclb"
                  @select="getListjclb"
                  :clearable="true"
                >
                  <template v-slot:right>
                    <uni-icons type="search" size="20" color="#999" />
                  </template>
                </uni-easyinput>
              </view>
              <scroll-view scroll-y class="table-container">
                <uni-table>
                  <uni-tr>
                    <uni-th width="55">选择</uni-th>
                    <uni-th>检测类别</uni-th>
                  </uni-tr>
                  <uni-tr 
                    v-for="(item, index) in tableDatajc" 
                    :key="index"
                    @click="toggleSelection(item)"
                  >
                    <uni-td>
                      <radio :checked="selectedItem === item.checkTypeName" @click="selectSingleItem(item)" />
                    </uni-td>
                    <uni-td>{{ item.checkTypeName }}</uni-td>
                  </uni-tr>
                </uni-table>
              </scroll-view>
              <view class="pagination">
                <uni-pagination 
                  :current="formDataLb.pageNum"
                  :pageSize="formDataLb.pageSize"
                  :total="total"
                  @change="handlePageChange"
                />
              </view>
              <view class="popup-footer">
                <button class="primary-btn" @click="submitjcLb">提交</button>
              </view>
            </view>
          </uni-popup>
          <uni-popup ref="multiPopupXm" type="bottom" class="popup-container">
            <view class="popup-content">
              <view class="search-box">
                <uni-easyinput
                  v-model="formDataXm.checkItemName"
                  placeholder="请输入检测项目"
                  @blur="getListjcxm"
                   @select="getListjcxm"
                  :clearable="true"
                >
                <template v-slot:right>
                    <uni-icons type="search" size="20" color="#999" />
                  </template>
                </uni-easyinput>
              </view>

              <scroll-view scroll-y class="table-container">
                <uni-table
                  ref="multipleTablexm"
                  :data="tableDatajc"
                  style="width: 100%"
                  @selection-change="handleSelectionChangejcxm"
                >
                  <uni-tr>
                    <uni-th width="55">选择</uni-th>
                    <uni-th>检测项目</uni-th>
                  </uni-tr>
                  <uni-tr v-for="(item, index) in tableDatajc" :key="index"
                    @click="toggleSelection(item)"
                  >
                    <uni-td>
                      <radio :checked="selectedItem === item.checkTypeName" @click="() => toggleSelection(item)" />
                    </uni-td>
                    <uni-td>{{ item.checkItemName }}</uni-td>
                  </uni-tr>
                </uni-table>
              </scroll-view>

              <view class="pagination">
                <uni-pagination 
                  :current="formDataXm.pageNum"
                  :pageSize="formDataXm.pageSize"
                  :total="total"
                  @change="handlePageChangeXM"
                />
              </view>

              <view class="popup-footer">
                <button class="primary-btn" @click="submitjcXm">提交</button>
              </view>
            </view>
          </uni-popup>

          <view class="form-item">  
            <label>检测项目:</label>  
            <input v-model="qcData.testItems" placeholder="请输入检测项目" class="input" />  
          </view>  
          <view class="form-item">  
            <label>分析方法:</label>  
            <input v-model="qcData.analysisMethod" placeholder="请输入分析方法" class="input" />  
          </view>  
          <view class="form-item">  
            <label>检测点位:</label>  
            <input v-model="qcData.monitorPoints" placeholder="请输入检测点位" class="input" />  
          </view>  
          <view class="form-item">  
            <label>检测频次:</label>  
            <input v-model="qcData.frequency" placeholder="请输入检测频次" class="input" />  
          </view>  
          <view class="form-item">  
            <label>采样时间:</label>  
            <picker mode="date" :value="qcData.sampleTime" @change="onSampleTimeChange">  
              <view class="input">{{ qcData.sampleTime || '选择日期' }}</view>  
            </picker>  
          </view>  
          <view class="form-item">  
            <label>报告时间:</label>  
            <picker mode="date" :value="qcData.reportTime" @change="onReportTimeChange">  
              <view class="input">{{ qcData.reportTime || '选择日期' }}</view>  
            </picker>  
          </view>  
          <view class="form-item">  
            <label>附件上传:</label>  
            <!-- uni-file-picker更适合小程序或App端上传 -->  
            <!-- <uni-file-picker  
              v-model="qcData.files"  
              file-mediatype="all"  
              mode="grid"  
              :limit="10"  
              title="将文件拖动此处，或点击上传"  
              @success="onFileUploadSuccess"  
            />   -->
            <view class="desc" style="font-size: 24rpx;color:#888;margin-top:4rpx;">  
              只能上传文件，且不允许同名文件存在  
            </view>  
          </view>  
          <view class="form-item">  
            <label>备注信息:</label>  
            <textarea v-model="qcData.remark" placeholder="请输入备注内容" class="input" style="min-height: 80rpx;" />  
          </view>  
        </view>  
      </view>

      <!-- 检测条目明细表格 -->
      <view class="card data-table-card">
        <view class="card-header table-header">
          <text>检测条目明细</text>
          <uni-button type="primary" size="mini" @click="addNewData">
            <uni-icons type="plus" size="16"></uni-icons>新增条目
          </uni-button>
        </view>
        
        <uni-table :data="AllData" border class="compact-table">
          <uni-tr>
            <uni-th width="180" align="center">检测类别</uni-th>
            <uni-th width="300">检测点位</uni-th>
            <uni-th width="400">检测项目</uni-th>
            <uni-th width="180">检测频次</uni-th>
            <uni-th width="400">分析方法</uni-th>
          </uni-tr>

          <uni-tr v-for="(row, rowIndex) in AllData" :key="rowIndex">
            <uni-td width="180" align="center" style="font-weight: bold;">
              {{ row.category }}
            </uni-td>
            
            <uni-td width="300">{{ row.points }}</uni-td>
            
            <uni-td width="400">
              <view class="selected-item" v-for="(item, index) in row.testItemsList" :key="index">
                {{ item }}
                <uni-button class="remove-btn" type="warn" size="mini" @click="removeItem(rowIndex, 'AllDataItems')">
                  <uni-icons type="close" size="14"></uni-icons>
                </uni-button>
              </view>
            </uni-td>
            
            <uni-td width="180">{{ row.frequency }}</uni-td>
            
            <uni-td width="400">
              <view class="selected-item" v-for="(item, index) in row.analysisMethodList" :key="index">
                {{ item }}
                <uni-button class="remove-btn" type="warn" size="mini" @click="removeItem(rowIndex, 'AllDataAnalysisMethod')">
                  <uni-icons type="close" size="14"></uni-icons>
                </uni-button>
              </view>
            </uni-td>
          </uni-tr>
        </uni-table>
      </view>
    </view>

    <view class="form-button">
      <button class="primary-btn" @click="submitForm">提交</button>
      <button class="reset-btn" @click="goBack">返回</button>
    </view>
  </view>
</template>

<script>
	import {
		add,
		list,
		update,
		checkContractNo,
		delContract,
		killContract,
		getTaskFiles,
		selectDeptTree,
		selectUserByDeptId,
		toExamine,
		selectDetectionCategory,
		selectTestItems,
		selectCcName,
    getListLb,
    getListXm,
    
	} from "@/api/mobilebusiness";
  
import { getInfo } from "@/api/login";
export default {
  data() {
  return {
    AllData : [{
          category: "",
          points: "",
          testItemsList: [],
          frequency: "",
          analysisMethodList: [],
        } ],
    currentRecord: {
        area: [], // 用于保存所选的省市区
        region: "",
        regionName:"",
        // ...其他字段
        // 统一使用 currentRecord
        monitoringPoints: "",
        taskName:"",
        taskId : "",
        contractNo: "",
        initiationTime: "",
        initiator: "",
        entrustingUnit: "",
        testedUnit: "",
        detectionProperties: "",
        testItems:"",
        testItemsList: [],
        contactPerson: "",
        contactNumber: "",
        contractNumber:"",
        urgency: "",
        detectionMethod: "",
        samplingTime: "",
        reportTime: "",
        detectionCategory: "",
        attachmentsId: "",
        monitoringFrequency: "",
        remark: "",
        fileIdList:[],
        analysisMethod:"",
        analysisMethodList:[],
        taskRegCheckDTOList: [{
          checkTypeId: "",
          checkItemIds: [],
          checkStandardIds: [],
          checkDot: "",
          checkFrequency: "",
        } ],
      },
    tableDatawxh: [],
    tableDatajc: [],
    multipleSelection: [],
    multipleSelection2: [],
    multipleSelection3: [],
    selectedItem: '',
    zbjclb: false,
    currentPage: 1,
    pageSize: 10,
    total: 0,
    isDisabled: false, // 控制表单是否可编辑
    isZhikong: false , // 控制表单是否可编辑
    formDataFf: {
        pageNum: 1,
        pageSize: 10,
        checkItemIdList:[],
        checkStandardName:"",
      },
    formDataLb: {
        pageNum: 1,
        pageSize: 10,
        checkTypeId:null,
        checkTypeName:"",
      },
      formDataXm: {
        pageNum: 1,
        pageSize: 10,
        checkTypeId:null,
        checkItemName:"",
      },
    AllDataIndex : 0,
    taskRegCheckDTOIndex:0,
    detectionPropertyOptions: ['环评', '验收', '自行检测', '监督性检测', '执法'],
    urgencyOptions: ['普通', '加急', '特急'],
    detectionMethodOptions: ['现场采样', '送样'],
    marketData: {
      contractNo: '',
      initiationTime: '',
      initiator: '',
      entrustUnit: '',
      testedUnit: '',
      detectionProperty: '',
      taskName: '',
      regionName: '',
      contact: '',
      contactPhone: '',
      urgency: '',
      detectionMethod: ''
    },
    taskRegCheckDTOList: [
        {
          checkTypeId: "",
          checkItemIds: [],
          checkStandardIds: [],
          checkDot: "",
          checkFrequency: "",
        }
      ],
    qcData: {
      testCategory: '',
      testItems: '',
      analysisMethod: '',
      monitorPoints: '',
      frequency: '',
      sampleTime: '',
      reportTime: '',
      files: [],
      remark: ''
    }
  }  
  },
  onLoad(options) {
    getInfo().then(res => {
       console.log('cccc',res.user.userName)
       this.marketData.initiator= res.user.userName;
      }).catch(error => {
       reject(error)
              })
  },
  methods: {

    
addNewData() {
  console.log('addNewData被调用');
  const requiredFields = [
    this.AllData[this.AllDataIndex].category,
    this.AllData[this.AllDataIndex].points,
    this.AllData[this.AllDataIndex].frequency,
    this.AllData[this.AllDataIndex].testItemsList.length,
    this.AllData[this.AllDataIndex].analysisMethodList.length
  ];

  if (requiredFields.some(field => !field)) {
    uni.showToast({ title: '请完整填写检测信息', icon: 'none' });
    return false;
  }

  // 使用$set确保响应式更新
  this.$set(this.AllData, this.AllDataIndex, {
    ...this.AllData[this.AllDataIndex],
    category: '',
    points: '',
    frequency: '',
    testItemsList: [],
    analysisMethodList: []
  });

  this.taskRegCheckDTOList.splice(this.taskRegCheckDTOIndex, 1, {
    checkTypeId: "",
    checkItemIds: [],
    checkStandardIds: [],
    checkDot: "",
    checkFrequency: ""
  });

  // 新增条目时创建新对象
  this.AllData.push({
    category: "",
    points: "",
    testItemsList: [],
    frequency: "",
    analysisMethodList: []
  });

  this.taskRegCheckDTOList.push({
    checkTypeId: "",
    checkItemIds: [],
    checkStandardIds: [],
    checkDot: "",
    checkFrequency: ""
  });

  this.AllDataIndex++;
  this.taskRegCheckDTOIndex++;
},

removeItem(index, type) {
  const updateNestedData = (mainIndex, prop) => {
    this.$set(this.AllData[mainIndex], prop, 
      this.AllData[mainIndex][prop].filter((_, i) => i !== index)
    );
  };

  switch(type) {
    case 'testItems':
    case 'AllDataItems':
      updateNestedData(this.AllDataIndex, 'testItemsList');
      break;

    case 'analysisMethod':
    case 'AllDataAnalysisMethod':
      updateNestedData(this.AllDataIndex, 'analysisMethodList');
      break;

    default:
      console.error('未知的删除类型:', type);
  }

  // 同步更新taskRegCheckDTOList
  this.$set(this.taskRegCheckDTOList, this.taskRegCheckDTOIndex, {
    ...this.taskRegCheckDTOList[this.taskRegCheckDTOIndex],
    checkItemIds: this.AllData[this.AllDataIndex].testItemsList.map(item => item.id),
    checkStandardIds: this.AllData[this.AllDataIndex].analysisMethodList.map(item => item.id)
  });
},

   
    
    selectSingleItem(item) {
      console.log('selectSingleItem', item);
      this.selectedItem = item.checkTypeName; // 记录选中的项
      this.multipleSelection = [item];
      this.formDataLb.checkTypeId = item.checkTypeId;
      this.qcData.testCategory = item.checkTypeName;
      console.log('选择的项目:', this.multipleSelection);
    },

    submitjcLb() {
      console.log('已选检测类别:', this.selectedItem);
      console.log("this.multipleSelection:",this.multipleSelection)
      
      // 初始化AllData数组
      if (!this.AllData) this.AllData = [{}];
      if (!this.AllData[this.AllDataIndex]) this.AllData[this.AllDataIndex] = {};
      
      this.AllData[this.AllDataIndex].category = this.multipleSelection[0].checkTypeName;
      console.log('this.AllData:', this.AllData);
      this.currentRecord.detectionCategory = this.multipleSelection[0].checkTypeName;
      this.formDataXm.checkTypeId=this.multipleSelection[0].checkTypeId;
      console.log('this.formDataXm:', this.formDataXm);
      if (this.multipleSelection) {
        this.formDataXm.checkTypeId = this.multipleSelection[0].checkTypeId;
        this.taskRegCheckDTOList[this.taskRegCheckDTOIndex].checkTypeId = this.multipleSelection[0].checkTypeId;;
      }
      
      // 清空关联的下级选项
      this.currentRecord.testItemsList = [];
      this.currentRecord.analysisMethodList = [];
      this.formDataFf.checkItemIdList = [];
      if(this.formDataFf.checkItemIdList.length>0&&this.formDataFf.checkItemIdList!=null){
                  this.formDataFf.checkItemIdList.splice(0);
        }
      // 关闭弹窗
      if(this.$refs.multiPopup) this.$refs.multiPopup.close(); 
    },
    
  
  handlePageChange(e) {
      console.log('handlePageChange', e);
      this.formDataLb.pageNum = e.current || 1;  
      this.formDataLb.pageSize = e.pageSize || 10;  
      this.getListjclb()
    },
    handlePageChangeXM(e) {
        console.log('handlePageChange', e);
        this.formDataXm.pageNum = e.current || 1;  
        this.formDataXm.pageSize = e.pageSize || 10;  
        this.getListjcxm()
    },
    
    getxmjcdg(){
       console.log('获取的值：',this.formDataXm.checkTypeId);
       if(this.formDataXm.checkTypeId!=null&&this.formDataXm.checkTypeId!='')
       {
        console.log('获取的值：',this.formDataXm);
        this.getListjcxm();
       }

    },
    getListjcxm(){
      console.log('getListjcxm的值：' + this.formDataXm);
      if(this.formDataXm.checkTypeId!=null){
          getListXm(this.formDataXm).then((response) => {
          console.log('返回的值 response', response);
          this.tableDatajc = response.rows;
          this.total = response.total;
          this.loading = false;
          if(this.$refs.multiPopupXm) this.$refs.multiPopupXm.open();
          }).catch(() => {
            this.loading = false;
            this.$message.error("获取数据失败");
          });
      }
    },
    getxmlbdg() {
    this.getListjclb();
  },
    getListjclb() {
      console.log('获取的值：');
      console.log(this.formDataLb);
      getListLb(this.formDataLb).then((response) => {
            console.log('返回的值 response', response);
            this.tableDatajc = response.rows;
            this.total = response.total;
            this.loading = false;
            if(this.$refs.multiPopup) this.$refs.multiPopup.open(); 
          })
          .catch(() => {
            this.loading = false;
            this.$message.error("获取数据失败");
          });
  },
  selectCategory(item) {
    this.qcData.testCategory = item.detectionCategory;
    this.$refs.popup.close();
  },
  
toggleSelection(item) {
  console.log('toggleSelection', item);
  const index = this.selectedItems.indexOf(item.detectionCategory);
  if (index === -1) {
    this.selectedItems.push(item.detectionCategory);
  } else {
    this.selectedItems.splice(index, 1);
  }
},
    
    async querySearch(queryString, cb) {
      if (!queryString) return cb([]);
      try {
        const res = await checkContractNo(queryString);
        const suggestions = res.map(item => ({
          value: item.contractNo,
          ...item
        }));
        cb(suggestions);
      } catch (e) {
        cb([]);
      }
    },
    handleSelect(item) {
      this.marketData = {
        ...this.marketData,
        ...item,
        regionName: `${item.province}-${item.city}-${item.district}`
      };
    },
    async handleContractNoBlur() {
      console.log('handleContractNoBlur' + this.marketData.contractNo);
      if (!this.marketData.contractNo) return;
      try {
        const res = await checkContractNo(this.marketData.contractNo);
        console.log('res', res);
        this.marketData = {
          ...this.marketData,
          testedUnit: res[0].inspectionUnit,
          taskName: res[0].projectName,
          contactPhone: res[0].phoneNumber,
          contact: res[0].contact,
          regionName: `${res[0].province}-${res[0].city}-${res[0].district}`
        };
      } catch (e) {
        uni.showToast({ title: '未找到该合同', icon: 'none' });
        this.marketData.testedUnit = '';
      }
    },
    onDetectionPropertyChange(e) {
      this.marketData.detectionProperty = this.detectionPropertyOptions[e.detail.value];
    },
    
    onUrgencyChange(e) {
      this.marketData.urgency = this.urgencyOptions[e.detail.value];
    },
    onDetectionMethodChange(e) {
      this.marketData.detectionMethod = this.detectionMethodOptions[e.detail.value];
    },
    onDateChange(e) {
      this.marketData.initiationTime = e.detail.value
    },
    onSampleTimeChange(e) {  
          this.qcData.sampleTime = e.detail.value  
        },  
        onReportTimeChange(e) {  
          this.qcData.reportTime = e.detail.value  
        },  
        onFileUploadSuccess({ tempFiles }) {  
          // 处理上传后文件  
          this.qcData.files = tempFiles  
        }  
  }
}
</script>

<style scoped>
.container {
  padding: 20rpx;
  background: #f7f7f7;
}

/* 统一卡片样式 */
.card {
  background: #fff;
  border-radius: 16rpx;
  margin: 24rpx 0;
  padding: 32rpx;
  box-shadow: 0 4rpx 24rpx rgba(0,0,0,.05);
  border: 1rpx solid #ebedf0;
}

.card-header {
  margin-bottom: 32rpx;
  padding-bottom: 16rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.card-title {
  font-weight: 500;
  font-size: 34rpx;
  color: #333;
  display: flex;
  align-items: center;
}

/* 表单布局优化 */
.form-item {
  display: flex;
  flex-direction: column;
  margin-bottom: 32rpx;
}

label {
  color: #666;
  font-size: 28rpx;
  margin-bottom: 12rpx;
  display: flex;
  align-items: center;
}

label::before {
  content: '';
  display: inline-block;
  width: 8rpx;
  height: 28rpx;
  background: #07c160;
  margin-right: 12rpx;
  border-radius: 4rpx;
}

.input {
  width: 100%;
  height: 80rpx;
  padding: 0 24rpx;
  border: 1rpx solid #e5e5e5;
  border-radius: 8rpx;
  font-size: 28rpx;
  transition: all 0.3s;
}

.input:focus {
  border-color: #07c160;
  box-shadow: 0 0 8rpx rgba(7,193,96,0.1);
}

picker .input {
  display: flex;
  align-items: center;
}

/* 按钮容器优化 */
.form-button {
  margin-top: 48rpx;
  display: flex;
  gap: 32rpx;
}

.primary-btn {
  flex: 1;
  background: #07c160;
  color: #fff;
  height: 88rpx;
  border-radius: 44rpx;
}

.reset-btn {
  flex: 1;
  background: #fff;
  color: #666;
  border: 1rpx solid #e5e5e5;
  height: 88rpx;
  border-radius: 44rpx;
}

/* 图标样式 */
.icon {
  margin-right: 12rpx;
  width: 36rpx;
  height: 36rpx;
}
</style>


<style scoped>
.container {
  padding: 20rpx;
  background: #f7f7f7;
}

/* 统一卡片样式 */
.card {
  background: #fff;
  border-radius: 16rpx;
  margin: 24rpx 0;
  padding: 32rpx;
  box-shadow: 0 4rpx 24rpx rgba(0,0,0,.05);
  border: 1rpx solid #ebedf0;
}

.card-header {
  margin-bottom: 32rpx;
  padding-bottom: 16rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.card-title {
  font-weight: 500;
  font-size: 34rpx;
  color: #333;
  display: flex;
  align-items: center;
}

/* 表单布局优化 */
.form-item {
  display: flex;
  flex-direction: column;
  margin-bottom: 32rpx;
}

label {
  color: #666;
  font-size: 28rpx;
  margin-bottom: 12rpx;
  display: flex;
  align-items: center;
}

label::before {
  content: '';
  display: inline-block;
  width: 8rpx;
  height: 28rpx;
  background: #07c160;
  margin-right: 12rpx;
  border-radius: 4rpx;
}
.popup-footer {
  padding: 20rpx;
  border-top: 1rpx solid #eee;
  display: flex;
  justify-content: flex-end;
}
.input {
  width: 100%;
  height: 80rpx;
  padding: 0 24rpx;
  border: 1rpx solid #e5e5e5;
  border-radius: 8rpx;
  font-size: 28rpx;
  transition: all 0.3s;
}

.input:focus {
  border-color: #07c160;
  box-shadow: 0 0 8rpx rgba(7,193,96,0.1);
}

picker .input {
  display: flex;
  align-items: center;
}

/* 按钮容器优化 */
.form-button {
  margin-top: 48rpx;
  display: flex;
  gap: 32rpx;
}

.primary-btn {
  flex: 1;
  background: #07c160;
  color: #fff;
  height: 88rpx;
  border-radius: 44rpx;
}

.reset-btn {
  flex: 1;
  background: #fff;
  color: #666;
  border: 1rpx solid #e5e5e5;
  height: 88rpx;
  border-radius: 44rpx;
}

/* 图标样式 */
.icon {
  margin-right: 12rpx;
  width: 36rpx;
  height: 36rpx;
}
</style>
